<template>
  <table class="table" cellspacing="0">
    <thead>
      <tr>
        <th>地区</th>
        <th>新增确诊</th>
        <th>累计确诊</th>
        <th>治愈</th>
        <th>死亡</th>
      </tr>
    </thead>
    <transition-group
      enter-active-class="animate__animated animate__flipInY"
      tag="tbody"
    >
      <tr :key="item.name" v-for="(item, index) in store.item">
        <td align="center">{{ item.name }}</td>
        <td align="center">{{ item.today.confirm }}</td>
        <td align="center">{{ item.total.confirm }}</td>
        <td align="center">{{ item.total.heal }}</td>
        <td align="center">{{ item.total.dead }}</td>
      </tr>
    </transition-group>
  </table>
</template>

<script setup lang="ts">
import { useListStore } from '@/stores/index'
import 'animate.css'
import { onMounted } from 'vue'
const store = useListStore()
onMounted(() => {
  console.log('tablemounted')
})

</script>

<style scoped lang="scss">
.table {
  background-color: rgb(33, 32, 40, 0.5);
  width: 100%;
  tr {
    th {
      padding: 5px;
      white-space: nowrap;
    }
  }
  td {
    padding: 5px 10px;
    width: 100px;
    white-space: nowrap;
  }
}
</style>
